<style rel="stylesheet/scss" lang="scss" scoped>
	.info-containter {
		display: flex;
		flex: 1;
		max-height: 100%;
		box-sizing: border-box;
		flex-direction: column;
		.box-flex {
			display: flex;
			font-size: 14px;
			margin-bottom: 10px;
		}
		.w-span {
			min-width: 50px;
			line-height: 30px;
			display: inline-block;
		}
		.img-box {
			width: 100px;
			height: 100px;
			border: 1px solid #e5e5e5;
		}
		.flex-row {
			width: 100%;
			display: flex;
			align-items: center;
			padding-top: 10px;
			padding-left: 10px;
			border: 1px solid #E5E5E5;
		}
		.table-box {
			width: 100%;
			flex: 1;
			overflow: auto;
		}
		#diyMapcontent {
			width: 603px;
			height: 300px;
		}
	}
</style>
<template>
	<div class="info-containter">

		<el-row class="flex-row">
			<el-col :span="10" class="box-flex">
				<span class="w-span" >店名:</span>
				<el-input placeholder="店名关键字" maxLength="20" class="m-r-10" v-model="keyword" size="mini" style="width: 180px;"></el-input>
				<el-button type="primary" @click="screenFn(1)" size="mini">筛选</el-button>
				<el-button type="primary" @click="screenFn(2)" size="mini">重置</el-button>
			</el-col>
		</el-row>
		<el-row class="m-t-10">
			<el-col :span="13" class="box-flex">
				<el-button type="success" @click="showDiglog" size="mini">新建</el-button>
				<el-button type="danger" @click="deleteAll" size="mini">批量删除</el-button>
			</el-col>
		</el-row>
		<div class="table-box">
			<template>
				<el-table :data="list" style="width: 100%" @selection-change="handleSelectionChange">
					<el-table-column type="selection" width="55">
					</el-table-column>
					<el-table-column label="序号" width="180" align="center" type="index">
					</el-table-column>
					<el-table-column prop="name" label="店名" width="180" align="center">
					</el-table-column>
					<el-table-column prop="address" label="地址" align="center">
					</el-table-column>
					<el-table-column prop="sort" label="顺序号(数字越大,越靠前)" align="center">
					</el-table-column>
					<el-table-column label="操作">
						<template scope="scope">
							<el-button size="mini" @click="doEdit(scope.row)" type="info" plain>编辑</el-button>
							<el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)" plain>删除</el-button>
						</template>
					</el-table-column>
				</el-table>
			</template>
			<current-page :current-page="page" :page-size="pageSize" :page-total="pageTotal" @handleCurrentChange="handleCurrentChange">
			</current-page>
		</div>
		<map-layer v-if="dialogVisible" @saveAddress="saveAddress" :info ="info" @closeMapLayer="closeMapLayer" :title="title"></map-layer>


	</div>
</template>
<script>
	import {
		getToken
	} from '@/utils/auth'
	import {
		SUCCESS_REQUEST_STATUS
	} from '@/utils/config.js'

	import mapLayer from './mapLayer.vue'
	import currentPage from '@/components/current-page/current-page.vue'
	export default {
		data() {
			return {
				list: [],
				page: 0,
				title: '新建店铺',
				pageSize: 10,
				keyword: '',
				pageTotal: 0,
				name: '',
				address: '',
				sort: '',
				dialogVisible: false,
				searchService: [],
				map: [],
				markers: [],
				info: {},
				multipleSelection: []
			}
		},

		created: function () {
			this._initData()
		},
		methods: {
			doEdit(item) {
				this.title = '编辑店铺'
				this.info = item
				this.dialogVisible = true
			},
			screenFn(num) {
				if(num ==2) {
					this.keyword = ''
				}
				this.page = 0
				this._initData()
			},
			// 批量删除
			deleteAll() {
				console.log(this.multipleSelection)
				let ids = []
				if(!this.multipleSelection.length) {
					this.$message({
						type: "error",
						message: "请选择需要删除的门店"
					});
					return
				}
				this.multipleSelection.map((item) => {
					ids.push(item.id)
				})
				this.$confirm("确定删除选中的门店?", "提示", {
					confirmButtonText: "确定",
					cancelButtonText: "取消",
					type: "warning"
				})
				.then(() => {
					console.log(44)
					this.$ajax({
						api: 'merchant/shop/batchDelete',
						params: {
							shopIds: ids.join(','),
							token: getToken(),
							merchantUserId: window.localStorage.getItem('merchantUserId') ? window.localStorage.getItem('merchantUserId') :
								''
						}
					}).then(res => {
						if (res.status === SUCCESS_REQUEST_STATUS) {
							this.$message({
								type: "success",
								message: "删除成功"
							})
							this.page = 0
							this._initData()
						}
					})
				})
				.catch(() => {
					this.$message({
						type: "info",
						message: "已取消删除"
					});
				})
				
			},
			// 删除店铺
			handleDelete(inde, item) {
				this.$confirm("确定删除此门店地址?", "提示", {
					confirmButtonText: "确定",
					cancelButtonText: "取消",
					type: "warning"
				})
				.then(() => {
					this.$ajax({
						api: 'merchant/shop/delete',
						params: {
							shopId: item.id,
							token: getToken(),
							merchantUserId: window.localStorage.getItem('merchantUserId') ? window.localStorage.getItem('merchantUserId') :
								''
						}
					}).then(res => {
						if (res.status === SUCCESS_REQUEST_STATUS) {
							this.$message({
								type: "success",
								message: "删除成功"
							})
							this.page = 0
							this._initData()
						}
					})
				})
				.catch(() => {
					this.$message({
						type: "info",
						message: "已取消删除"
					});
				});
			},
			saveAddress() {
				this.page = 0
				this._initData()
				this.dialogVisible = false

			},
			closeMapLayer() {
				this.dialogVisible = false
			},
			showDiglog() {
				this.info = {}
				this.title = '新建店铺'
				this.dialogVisible = true
			},
			_initData() {
				this.$ajax({
					api: 'merchant/shop/list',
					params: {
						token: getToken(),
						page: this.page,
						pageSize: this.pageSize,
						keyword: this.keyword,
						merchantUserId: window.localStorage.getItem('merchantUserId') ? window.localStorage.getItem('merchantUserId') :
							''
					}
				}).then(res => {
					console.log(res)
					if (res.status === SUCCESS_REQUEST_STATUS) {
						this.list = res.data.shopList
						this.page = res.data.page.page
						this.pageTotal = res.data.page.pageCount
					}

				}).catch(err => {
					this.$message({
						type: 'error',
						message: err.message
					})
				})
			},
			handleCurrentChange(page) {
				this.page = page
			},
			handleSelectionChange(val) {
				this.multipleSelection = val;
			}
		},
		components: {
			currentPage,
			mapLayer
		}
	}
</script>
